<template>
  <div id="corporateMem">
    <!-- 顶部 -->
    <van-nav-bar title="智云企业会员">
      <template #left>
        <img
          src="../assets/images/corporatemem/pic1.png"
          alt=""
          @click="getBack"
        />
      </template>
    </van-nav-bar>
    <main>
      <!-- vip -->
      <div class="vip"></div>
      <!-- 背景 -->
      <div class="beijing">
        <div class="beijing-pic">
          <img
            src="../assets/images/corporatemem/pic3.png"
            alt=""
            style="width: 100%"
          />
        </div>
        <div class="bei-txt">
          <span>全家共享权益</span>
          <span>时刻守护健康</span>
        </div>
      </div>
      <!-- 会员图 -->
      <div class="zhiyunVip">
        <p>智云企业会员</p>
        <p>智云健康为企业提供个性化健康服务规划</p>
      </div>
      <!-- 图片框 -->
      <div class="border"></div>
      <!-- 咨询 -->
      <div class="btn" ref="pronbit">立即咨询</div>
      <p class="code">使用兑换码</p>

      <!-- 小圆图标 -->
      <div class="circle">
        <img
          src="../assets/images/corporatemem/pic7.png"
          alt=""
          class="small1"
          style="width: 15px; height: 15px"
        />
        <img
          src="../assets/images/corporatemem/pic8.png"
          alt=""
          class="big1"
          style="width: 25px; height: 25px"
        />
        <img
          src="../assets/images/corporatemem/pic7.png"
          alt=""
          class="small2"
          style="width: 15px; height: 15px"
        />
        <img
          src="../assets/images/corporatemem/pic8.png"
          alt=""
          class="big2"
          style="width: 25px; height: 25px"
        />
      </div>
      <!-- 会员介绍 -->
      <div class="introduction">
        <p class="introduction-title">企业会员介绍</p>
        <van-grid :border="false" class="introduction-pic">
          <van-grid-item
            v-for="item in introductionList"
            :key="item.url"
            :icon="item.url"
            :text="item.txt"
          />
        </van-grid>
        <div class="introduction-list">
          <div class="introduction-list1">
            <span>1</span>
            <span>智云健康携手合作伙伴提供20+权益</span>
          </div>
          <div class="introduction-list1">
            <span>2</span>
            <span>根据企业需求定制尊享会员卡</span>
          </div>
          <div class="introduction-list1">
            <span>3</span>
            <span>提供一站式团体健康管理解决方案</span>
          </div>
        </div>
      </div>
      <!-- 20+ -->
      <div class="rights">
        <p class="rights-title">20+权益自由组合</p>
        <van-grid :border="false">
          <van-grid-item
            v-for="value in rightsList"
            :key="value.url"
            :icon="value.url"
            :text="value.txt"
          />
        </van-grid>
        <p class="dian"><span></span><span></span><span></span></p>
      </div>

      <!-- 优势 -->
      <div class="good">
        <p class="good-title">智云独特优势</p>
        <div class="good-list">
          <div class="good-pic" v-for="value in goodList" :key="value.url">
            <img :src="value.url" />
            <p>{{ value.txt }}</p>
          </div>
        </div>
      </div>
      <!-- 服务 -->
      <div class="service">
        <p class="service-title">现有服务合作企业</p>
        <div class="service-list">
          <div
            class="service-pic"
            v-for="value in serviceList"
            :key="value.url"
          >
            <img :src="value.url" />
          </div>
        </div>
      </div>
      <!-- 评价 -->
      <div class="evaluate">
        <p class="evaluate-title">服务企业评价</p>
        <div class="user-evaluate">
          <img src="../assets/images/corporatemem/pic31.png" alt="" />
          <div class="users">
            <span class="username">张总</span>
            <span>某创业公司CEO</span>
            <p class="usertxt">
              工作效率重要，员工健康更加重要。有好的体魄
              才能更好工作。定制化企业方案能满足各种场
              景，员工的健康有了切实保障。
            </p>
          </div>
        </div>
        <div class="user-evaluate1">
          <img src="../assets/images/corporatemem/pic31.png" alt="" />
          <div class="users">
            <span class="username">张*</span>
            <span>企业HR</span>
            <p class="usertxt">
              作为员工福利健康受人关注。和智云合作以来，
              员工病假次数明显降低，为我们的员工管理和企 业成长锦上添花。
            </p>
          </div>
        </div>
      </div>
      <!-- 文字 -->
      <p class="text">部分定制服务由上海运臻网络科技有限公司提供</p>

      <div class="btn1" :class="flag">立即咨询</div>
    </main>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const introductionList = reactive([
      {
        url: require("../assets/images/corporatemem/pic11.png"),
        txt: "企业员工" + "\n" + "健康管理",
      },
      {
        url: require("../assets/images/corporatemem/pic12.png"),
        txt: "企业" + "\n" + "福利拓展",
      },
      {
        url: require("../assets/images/corporatemem/pic13.png"),
        txt: "定向" + "\n" + "高风险人群",
      },
      {
        url: require("../assets/images/corporatemem/pic14.png"),
        txt: "企业客户" + "\n" + "定制权益",
      },
    ]);
    const rightsList = reactive([
      {
        url: require("../assets/images/corporatemem/pic16.png"),
        txt: "健康管理",
      },
      {
        url: require("../assets/images/corporatemem/pic17.png"),
        txt: "在线问诊",
      },
      {
        url: require("../assets/images/corporatemem/pic18.png"),
        txt: "体检套餐",
      },
      {
        url: require("../assets/images/corporatemem/pic19.png"),
        txt: "额外保险",
      },
    ]);
    const goodList = reactive([
      {
        url: require("../assets/images/corporatemem/pic21.png"),
        txt: "全流程标准化",
      },
      {
        url: require("../assets/images/corporatemem/pic22.png"),
        txt: "强大专家资源",
      },
      {
        url: require("../assets/images/corporatemem/pic23.png"),
        txt: "专业管理模式",
      },
      {
        url: require("../assets/images/corporatemem/pic24.png"),
        txt: "综合服务平台",
      },
    ]);
    const serviceList = reactive([
      {
        url: require("../assets/images/corporatemem/pic26.png"),
      },
      {
        url: require("../assets/images/corporatemem/pic27.png"),
      },
      {
        url: require("../assets/images/corporatemem/pic28.png"),
      },
      {
        url: require("../assets/images/corporatemem/pic29.png"),
      },
    ]);
    let y = ref(document.documentElement.scrollTop);
    // const pronbit = ref(document.querySelector(".btn"))
    // const pronbit1 = ref(document.querySelector(".btn1"))
    let flag = ref("nofixed");

    // 监听滚轮事件
    onMounted(() => {
      window.addEventListener("scroll", distance);
    });
    // 事件
    const distance = () => {
      if (document.documentElement.scrollTop > 396) {
        flag.value = "fixed";
      } else {
        flag.value = "nofixed";
      }
    };

    const route = useRouter();
    const getBack = () => {
      // console.log(12);
      route.go(-1);
    };

    return {
      introductionList,
      rightsList,
      goodList,
      serviceList,
      route,
      // pronbit,
      // pronbit1,
      flag,
      y,
      getBack,
      distance,
    };
  },
};
</script>

<style lang="less">
#corporateMem {
  .van-nav-bar__title {
    font-size: 18px;
    font-weight: bold;
  }
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    img {
      width: 10px;
      height: 18px;
    }
  }
  // 主体
  main {
    width: 100%;
    background: #2d2228;
    padding: 40px 12px 7px 12px;
    margin-top: 46px;
    // position: fixed;
    // top: 46px;
    // bottom: 0;
    // left: 0;
    // right: 0;
    // overflow: auto;
    .vip {
      width: 274px;
      height: 48px;
      background: url("../assets/images/corporatemem/pic2.png");
      background-size: 274px 48px;
      margin: 0 auto;
    }
    // 背景图
    .beijing {
      margin: auto;
      width: 100%;
      height: 63px;
      line-height: 20px;
      font-size: 10px;
      position: relative;

      .beijing-pic {
        position: absolute;
        top: 0;
      }
      .bei-txt {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        font-size: 18px;
        color: #634227;
        line-height: 44px;
        text-align: center;

        // :first-child {
        //   margin-left: 18px;
        // }
        :last-child {
          margin-left: 10px;
        }
      }
    }
    // 企业会员
    .zhiyunVip {
      margin: 0 auto;
      margin-top: 25px;
      padding-top: 21px;
      padding-left: 34px;
      width: 350px;
      height: 162px;
      background: url("../assets/images/corporatemem/pic4.png");
      background-size: 350px 162px;

      :first-child {
        font-size: 24px;
        font-weight: bold;
        color: #362031;
      }
      :last-child {
        margin-top: 7px;
        font-size: 14px;
        color: #362031;
      }
    }
    // 框
    .border {
      width: 100%;
      height: 15px;
      background: url("../assets/images/corporatemem/pic5.png");
      background-size: 100% 15px;
      margin-top: 6px;
    }
    // 咨询
    .btn {
      width: 100%;
      height: 58px;
      line-height: 58px;
      background: url("../assets/images/corporatemem/pic6.png");
      background-size: 100%, 58px;
      text-align: center;
      font-size: 18px;
      color: #333333;
      text-shadow: 0px 0px 5px #ffffff;
    }
    .code {
      margin-top: 18px;
      text-align: center;
      font-size: 12px;
      color: #ffffff;
      text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
    }
    // 小圆图标
    .circle {
      position: relative;
      height: 79px;
      .small1 {
        position: absolute;
        top: 34px;
        left: 60px;
      }
      .small2 {
        position: absolute;
        top: 34px;
        right: 60px;
      }
      .big1 {
        position: absolute;
        top: 38px;
        left: 75px;
      }
      .big2 {
        position: absolute;
        top: 38px;
        right: 75px;
      }
    }
    // 会员介绍
    .introduction {
      width: 100%;
      height: 284px;
      background: url("../assets/images/corporatemem/pic9.png");
      background-size: 100% 284px;
      position: relative;

      .introduction-title {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        color: #ffffff;
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
      }

      .introduction-pic {
        width: 100%;
        position: absolute;
        top: 50px;
        .van-grid-item__content {
          background-color: #fff0;

          .van-icon__image {
            width: 49px;
            height: 49px;
          }
          .van-grid-item__text {
            width: 63px;
            font-size: 10px;
            color: #fff;
            text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
            text-align: center;
            white-space: pre;
          }
        }
      }
      .introduction-list {
        position: absolute;
        bottom: 30px;
        left: 20px;
        font-size: 14px;
        color: #ffffff;
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);

        .introduction-list1 {
          height: 24px;
          :first-child {
            display: inline-block;
            width: 14px;
            height: 14px;
            line-height: 14px;
            border-radius: 50%;
            background: #6f6e6f;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
    // 20+权益
    .rights {
      width: 100%;
      height: 164px;
      background: url("../assets/images/corporatemem/pic15.png");
      background-size: 100% 164px;
      position: relative;

      .rights-title {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        color: #ffffff;
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
      }

      .van-grid {
        position: absolute;
        top: 56%;
        left: 20px;
        transform: translateY(-50%);
        .van-grid-item__content {
          background-color: #fff0;

          .van-icon__image {
            width: 49px;
            height: 49px;
          }
          .van-grid-item__text {
            width: 63px;
            font-size: 10px;
            color: #fff;
            text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
            text-align: center;
            margin-top: 0;
          }
        }
      }

      .dian {
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
        position: absolute;
        right: 20px;
        bottom: 41%;

        span {
          display: inline-block;
          width: 3px;
          height: 3px;
          border-radius: 50%;
          border: 1px solid #8d8a91;
          margin-left: 8px;
        }
      }
    }
    // 优势
    .good {
      width: 100%;
      height: 273px;
      background: url("../assets/images/corporatemem/pic20.png");
      background-size: 100% 273px;
      position: relative;

      .good-title {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        color: #ffffff;
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
      }

      .good-list {
        position: absolute;
        top: 56%;
        // left: 50%;
        transform: translate(3%, -50%);
        display: flex;
        flex-wrap: wrap;
        .good-pic {
          background-color: #fff0;
          position: relative;

          img {
            width: 166px;
            height: 91px;
          }
          p {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            color: #fff;
            text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
            text-align: center;
          }
        }
      }
    }
    // 服务
    .service {
      width: 100%;
      height: 237px;
      background: url("../assets/images/corporatemem/pic25.png");
      background-size: 100% 237px;
      position: relative;

      .service-title {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        color: #ffffff;
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
      }

      .service-list {
        position: absolute;
        top: 56%;
        // left: 50%;
        transform: translate(3%, -50%);
        display: flex;
        flex-wrap: wrap;

        .service-pic {
          background-color: #fff0;
          position: relative;

          img {
            width: 166px;
            height: 91px;
          }
        }
      }
    }
    // 评价
    .evaluate {
      width: 100%;
      height: 285px;
      background: url("../assets/images/corporatemem/pic30.png");
      background-size: 100% 285px;
      position: relative;
      padding-top: 40px;
      padding-left: 20px;

      .evaluate-title {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        color: #ffffff;
        text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
      }
      .user-evaluate {
        width: 100%;
        height: 110px;
        // position: absolute;
        // top: 50px;
        // margin: 10px auto ;
        display: flex;
        img {
          width: 28px;
          height: 28px;
        }

        .users {
          width: 270px;
          color: #ffffff;
          text-align: left;
          margin-left: 10px;
          font-size: 18px;
          padding-top: 5px;

          .username {
            font-size: 20px;
            line-height: 18px;
            text-shadow: 0px 0px 7px #030206;
            margin-right: 5px;
          }
          span {
            font-size: 12px;
            line-height: 18px;
            text-shadow: 0px 0px 7px #030206;
          }
          .usertxt {
            font-size: 12px;
            line-height: 18px;
            text-shadow: 0px 0px 7px #030206;
            margin-top: 10px;
          }
        }
      }
      .user-evaluate1 {
        width: 100%;
        height: 110px;

        img {
          width: 28px;
          height: 28px;
          float: left;
        }

        .users {
          width: 270px;
          float: left;
          color: #ffffff;
          text-align: left;
          margin-left: 10px;
          font-size: 18px;
          padding-top: 5px;

          .username {
            font-size: 20px;
            line-height: 18px;
            text-shadow: 0px 0px 7px #030206;
            margin-right: 5px;
          }
          span {
            font-size: 12px;
            line-height: 18px;
            text-shadow: 0px 0px 7px #030206;
          }
          .usertxt {
            font-size: 12px;
            line-height: 18px;
            text-shadow: 0px 0px 7px #030206;
            margin-top: 10px;
          }
        }
      }
    }
    .text {
      font-size: 14px;
      color: #ffffff;
      line-height: 35px;
      text-shadow: 0px 0px 9px rgba(3, 2, 6, 0.5);
      text-align: center;
      margin-top: 30px;
    }
    .btn1 {
      width: 100%;
      height: 58px;
      line-height: 58px;
      background: url("../assets/images/corporatemem/pic6.png");
      background-size: 100%, 58px;
      text-align: center;
      font-size: 17px;
      color: #333333;
      text-shadow: 0px 0px 5px #ffffff;
      margin-top: 30px;
    }
    .fixed {
      position: fixed;
      bottom: 10px;
      left: 0;
    }
  }
}
</style>
